<sf-item-wrap [id]="id" [schema]="schema" autocomplete="off" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
    <div
        class="icon-select-container"
        nz-dropdown
        nzTrigger="click"
        nzOverlayClassName="header-dropdown"
        [nzDropdownMenu]="menu"
        [(nzVisible)]="nzVisible"
    >
        <div class="ant-input input-icon-item-container">
            <ng-container *ngIf="!!iconString; else noValue">
                <span nz-icon [nzType]="iconString" nzTheme="outline"></span> {{ iconString }}
            </ng-container>
            <ng-template #noValue>
                <div class="ant-select-selection-placeholder">请选择图标</div>
            </ng-template>
        </div>
        <div class="ant-select-arrow">
            <span class="container-svg" nz-icon nzType="down" [nzType]="nzVisible ? 'up' : 'down'"></span>
        </div>
    </div>
    <nz-dropdown-menu #menu="nzDropdownMenu">
        <div class="sf-icon-select-panel">
            <input nz-input placeholder="请输入图标名称" [ngModel]="searchValue" (ngModelChange)="changeSearchValue($event)" />
            <div style="height: 10px"></div>
            <div nz-row class="icons-container scrollbar">
                <div nz-col nzSpan="8" *ngFor="let icon of icons">
                    <div class="icon-item">
                        <div class="icon-item-inner" [ngClass]="{ 'icon-active': icon === iconString }" (click)="checkIcon(icon)">
                            <span nz-icon [nzType]="icon" nzTheme="outline"></span> {{ icon }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nz-dropdown-menu>
</sf-item-wrap>
